<template>
  <div>
    <!-- 双向数据绑定 -->
    用户名: <input id="username" v-model="msg" type="text"><br>
    自我介绍: <textarea v-model="intro" name="" id="" cols="30" rows="10"></textarea><br>
    <!-- 兴趣爱好:
    注意事项：
    checkbox 狠特殊，它分为俩种情况
    1.绑定的值是数组
    会将当前复选框的value加入到数组中
    一般用于多选操作，例如多选题，兴趣爱好
    2.绑定的值是非数组(隐式转换为boolean)
    会将当前复选框的checked属性同步给变量 -->
    <input v-model="hobby" type="checkbox" value="smoke"/>抽烟
    <input v-model="hobby" type="checkbox" value="drink"/>喝酒
    <input v-model="hobby" type="checkbox" value="sing"/>唱歌
    <br>
    <hr>
    全选: <input v-model="isAll" type="checkbox">
    <br>
    <button @click="login">提交</button>
  </div>
</template>

<script>
 export default {
  data (){
  return {
      isShow:true,
      msg:'123',
    intro:'',
    hobby:[],
    isAll:false
  }

  },
   methods:{
   login(){
    console.log(this.msg,this.intro);
   }
 }
 }

 
</script>

<style>

</style>